<template>
  <div class="layout-content">
    <el-row :gutter="48" >
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <div class="list">
            <slot name="left"></slot>
          </div>
        </div></el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <div class="goods">
            <slot name="right"></slot>
          </div>
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button, Select, Row, Col } from 'element-ui'

Vue.use(Button)
Vue.use(Select)
Vue.use(Row)
Vue.use(Col)
export default {
  name: 'LayoutContent'
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
    padding: 47px 0 228px;
    background: #fff;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-col-5{
    width: 304px;
    margin-left: 48px;
  }
  .el-col-16{
    width: 848px;
  }
  .list{
    width: 256px;
    box-shadow: 0px 3px 6px #798C9D;
    background: rgba($color: #788B9C, $alpha: 0.05);
  }
</style>
